<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">

    <title>我的团队</title>
    <link rel="stylesheet" href="../style/base.css">
    <!--<link rel="stylesheet" href="../css/layout.css">-->
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
    <script src="../../js/RGraph.common.core.js" ></script>
    <script src="../../js/RGraph.pie.js" ></script>
    <script src="../js/paramsTool.js" ></script>
</head>
<style type="text/css">
    /****我的战友团******/
    .psbar{margin-top:20px; width:100%;height:60px;line-height:60px;font-size:16px;font-weight:bold; background:#36a2f9; text-align:center; color:#fff; font-size:17px;}
    .psbar .left{ float:left; margin-left:20px;}
    .psbar .right{ float:right; margin-right:20px; font-size:14px; }
    .reldivt{margin:40px auto; width:98%; font-size:14px; font-weight:bold;color:#fff; }
    .reldivt .three{  margin-top:20px;}
    .reldivt .three label{ font-size: 28px; color:#3682f9 ;font-weight:bold;}
    .reldivt .three dl{width:42%; float:left; text-align:center; margin-left:5.5%;background:#fff; border-radius:6px;}
    .reldivt .three dl dt {height:50px;}
    .reldivt .three dl dt img{height:50px; margin-top:5px;}
    .reldivt .three dl dd{color:#1a2226; text-align:center; height:30px; line-height:30px; padding: 5px 0}
    /***图表**/
    .mreltop{background:#36a2f9; text-align: center; height:40px;line-height:40px;border-top-left-radius:6px;border-top-right-radius:6px; }

    .pis{height:450px; margin-top:35px; position:relative; }

    .pis .mreltop .any{position:absolute; border: 1px solid #fff; border-radius:6px; width:120px; height:35px; line-height:35px; text-align:center; top:-30px; left:5px; background:#cc3435;}
    .pis .pisbotm{background:#fff;border-top-left-radius:6px;border-top-right-radius:6px;}

    .pis .analysis{margin-top:30px;}
    .pis .analysis .left,.pis .analysis .right{width:45%;float:left; height:30px; line-height:30px; text-align:center; margin:0 auto;}
    .pis .analysis .left .on{width:30px;height:30px; background:#F7464A; float:left;}
    .pis .analysis .right .off{width:30px;height:30px; background:#949FB1;float:left;}
    .pis .analysis .exp{float:left; border:0px solid black; color:black; margin-left:2px; font-size:13px;}
    .pis .sum,.pis_get .sum{text-align:center; color:#0685fc; font-size:18px;}
    .pis .ept,.pis_get .ept{color:#36a2f9; margin-left:10px; font-size:15px; font-weight:bold; line-height:30px;}
    .pis .sumy,.pis_get .sumy{border:1px solid #ddd; border-radius:6px;line-height:1.8; color:#1a2226; padding:5px;}
    /*****pis-get*******/
    .pis_get{border:0px solid black;  margin:0 auto; background:#fff; border-radius:6px; margin-top:50px;}

</style>
<script>
    var host = window.location.origin;
    var params = queryString();
    var disOpenid = null;
    if(params.disOpenid){
        disOpenid = params.disOpenid
    }else {
        disOpenid = getCookie('disOpenid');
    }

    if(!disOpenid){
        getDisWxCode();
    }

    var lre1 = 0,lre2 = 0,pre1 = 0, pre2 = 0;

    window.onload = function ()
    {
        $.ajax({
            url: host+ "/getDisRefereeNum",
            type: "get",
            dataType:'json',
            headers: {"content-type":"application/json","disopenid":disOpenid},
            async:true,//请求是否异步，默认为异步，这也是ajax重要特性
            success:function(data){
                console.log('data',JSON.stringify(data));
                if(data.code){
                    alert('error:'+data.info);
                }else {
                    console.log('data:%s',JSON.stringify(data));
                    data = data.refNum;
                    lre1 = data.ref1Num || 0;
                    lre2 = data.ref2Num || 0;
                    pre1 = lre1/(lre1+lre2)*100;
                    pre2 = 100-pre1;

                    console.log(pre1,pre2);
                    $("#re1Num").html(lre1);
                    $("#re2Num").html(lre2);

                    var txt;
                    if(lre1+lre2<5){
                        txt = '还需要更加努力获得更多推荐人佣金哦';
                    }else if(pre1 > 60){
                        txt = '您的一级推荐人需要更给力些呐';
                    }else if(lre1+lre2>30) {
                        txt = '你太棒啦,马上就能获得更多奖励了!';
                    }else if(pre2 > pre1){
                        txt = '你的一级推荐人非常厉害哦';
                    }else {
                        txt = '推荐越多奖励才越多哦'
                    }
                    $('.sumy').html(txt);

                    var width=document.documentElement.clientWidth;
                    var pay = document.getElementById("cvs-pay");

                    pay.style.cssText="width:"+(width - 20)+"px;border:0px solid red;overflow:hidden";


                    var pie = new RGraph.Pie({
                        id: 'cvs-pay',
                        data: [pre1,pre2],
                        options: {
                            radius: 140,
                            strokestyle: 'white',
                            colors: [
                                'rgb(247, 70, 74)',
                                'rgb(241, 223, 69)'
                            ],
                            linewidth: 4,
                            shadow: false,
                            labels: ['一级推荐'+lre1+'人，占\n比+'+pre1.toFixed(2)+'%','二级推荐'+lre2+'人，\n占比'+pre2.toFixed(2)+'%'],
                            labelsSticks: true,
                            labelsSticksLength:5,
                            textFont: 'Arial',
                            textSize: 15
                        }
                    }).draw();
                }
            },
            error:function() {
                alert('获取数据失败,请重试!')
            }
        });
    };

    function teamList(ref){
        location.href = host+'/distribution/view/teamList.html?disOpenid='+disOpenid+'&ref='+ref;
    }

</script>
<body style="background:#efeff4;">

<div class="psbar bolder">
    推荐详情
</div>
<div class="reldivt">
    <div class="three">
        <a onclick="teamList(1)">
            <dl>
                <dt ><img src="../images/class1.png"></dt>
                <dd class=" c89"><font size="+2" color="#36a2f9" style="font-weight:bold;">直推</font> 推荐人数</dd>
                <dd class=" c368"><label id="re1Num">0</label> 人</dd>
                <!--<dd class="bolder ft4">总计： 90人</dd>-->
            </dl>
        </a>
        <a onclick="teamList(2)">
            <dl class="list">
                <dt><img src="../images/class2.png"></dt>
                <dd class=" c89"><font size="+2" color="#36a2f9" style="font-weight:bold;">隔代</font> 推荐人数</dd>
                <dd class=" c368"><label id="re2Num">0</label> 人</dd>
                <!--<dd class="bolder ft4">总计：108人</dd>-->
            </dl>
        </a>

    </div>

    <!--付费比图形列表-->
    <div class="reldiv">
        <div class="clear"></div>
        <div class="mrel pis">
            <div class="mreltop">
                <div class="left">数据分析</div>
                <div class="right"></div>

                <div class="clear"></div>
                <div class="pisbotm">
                    <canvas id="cvs-pay" width="600" height="400" style="height:190px; border:0px solid #ddd; margin-left:3%;">[您的手机不支持图标样式！]</canvas>
                    <!--<div class="sum  bolder">转化率46.2%</div>-->
                    <div class="ept">数据解读</div>
                    <div class="sumy">
                        推荐越多奖励才越多哦!
                    </div>
                </div>

            </div>
            <div class="clear">	</div>
        </div>

    </div>
    <div class="kongbai clear"></div>
</div>
</body>
</html>
